<template>
    <div>
        <div class="ef-node-form">
            <div class="ef-node-form-header">
                编辑
            </div>
            <div class="ef-node-form-body">
                <el-form :model="node" ref="dataForm" :rules="rules" label-width="80px" v-show="type === 'node'">
                    <el-form-item label="节点ID" prop="id">
                        <el-input v-model="node.id" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-input v-model="node.type" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="node.name"></el-input>
                    </el-form-item>
                    <el-form-item label="left坐标" prop="left">
                        <el-input v-model="node.left" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="top坐标" prop="top">
                        <el-input v-model="node.top" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="ico图标" prop="ico">
                        <el-select v-model="node.ico" placeholder="请选择" @change="save()">
                            <el-option
                                    v-for="item in iconList"
                                    :key="item.state"
                                    :label="item.label"
                                    :value="item.state">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-select v-model="node.state" placeholder="请选择" @change="ChangeState">
                            <el-option
                                    v-for="item in stateList"
                                    :key="item.state"
                                    :label="item.label"
                                    :value="item.state">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="表达式" prop="expression">
                      <el-input v-model="node.expression"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-close" @click="resetForm">重置</el-button>
                        <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
                    </el-form-item>
                </el-form>

                <el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
                    <el-form-item label="条件">
                        <el-input v-model="line.label"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-close" >重置</el-button>
                        <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--            <div class="el-node-form-tag"></div>-->
        </div>
    </div>

</template>

<script>
    import { cloneDeep } from 'lodash'
    import { debounce } from '@/utils/debounce'
    export default {
        data() {
            return {
                visible: true,
                // node 或 line
                type: 'node',
                node: {
                  id:'',
                  expression:''
                },
                line: {},
                data: {},
                CurrentId:'',
                stateList: [{
                    state: 'success',
                    label: '成功'
                }, {
                    state: 'warning',
                    label: '警告'
                }, {
                    state: 'error',
                    label: '错误'
                }, {
                    state: 'running',
                    label: '运行中'
                }],
                iconList: [{
                    state: 'el-icon-message-solid',
                    label: '消息'
                }, {
                    state: 'el-icon-download',
                    label: '下载'
                }, {
                    state: 'el-icon-upload2',
                    label: '上传'
                }, {
                    state: 'el-icon-upload',
                    label: '上传云端'
                },
                {
                    state: 'el-icon-goods',
                    label: '商品'
                },
                {
                    state: 'el-icon-present',
                    label: '礼物'
                },
                 {
                    state: 'el-icon-user-solid',
                    label: '用户'
                }],
                rules:{
                  
                }
            }
        },
        methods: {
            /**
             * 表单修改，这里可以根据传入的ID进行业务信息获取
             * @param data
             * @param id
             */
            nodeInit(data, id) {
              // 保存当前节点id
                this.CurrentId = id
                this.type = 'node'
                this.data = data
                data.nodeList.filter((node) => {
                    if (node.id === id) {
                        this.node = cloneDeep(node)
                    }
                })
            },
            lineInit(line) {
                this.type = 'line'
                this.line = line
            },
            // 修改连线
            saveLine() {
                this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
      
            },
            save(e) {
                if(!this.data.nodeList)return
                this.data.nodeList.filter((node) => {
                    if (node.id === this.node.id) {
                        node.name = this.node.name
                        node.left = this.node.left
                        node.top = this.node.top
                        node.ico = this.node.ico
                        node.state = this.node.state
                        node.expression = this.node.expression
                        this.$emit('repaintEverything')
                    }
                })
                if(e)this.$message.success("保存成功")
            },
            ChangeState(value){
              this.node.state = value
              this.$emit('UpdateNodeState', {node:this.node , id:this.CurrentId})
            },
            // 重置当前表单
            resetForm(){
              this.node = {...this.node , ...{
                name:"",
                ico:"",
                state:"",
                expression:""
              }}
              this.$refs.dataForm.resetFields()
            }
        },
        watch : {
          node:{
            deep :true,
            handler:debounce(function(){this.$emit('sendUpdated')},1000)
          }
        }
    }
</script>

<style>
    .el-node-form-tag {
        position: absolute;
        top: 50%;
        margin-left: -15px;
        height: 40px;
        width: 15px;
        background-color: #fbfbfb;
        border: 1px solid rgb(220, 227, 232);
        border-right: none;
        z-index: 0;
    }
</style>
